<template>
    <div class="message-content">
        <common-top-button></common-top-button>
        <div class="message-content-title">
            <h2>美女</h2>
        </div>
        <div class="message-content-show">
            <message-content-other></message-content-other>
            <message-content-other></message-content-other>
            <message-content-my></message-content-my>
            <message-content-my></message-content-my>
        </div>

        <div class="message-content-input">

        </div>
        <div class="message-content-send">
            <Button type="text" @click="send()">发送(S)</Button>
        </div>

    </div>
</template>

<script>
    import CommonTopButton from "../Common/WinButton"
    import MessageContentMy from "./MessageContentMy"
    import MessageContentOther from "./MessageContentOther"

    export default {
        name: "MessageDetail",
        components: {CommonTopButton, MessageContentMy, MessageContentOther},
        data() {
            return {
                content: `<p>1231232132131</p>`,
                editorOption: {
                    modules: {
                        toolbar: ""
                    }
                }
            }
        },
        methods: {
            selectFile: function () {

            },
            send: function () {
                var url = "http://localhost:8080/gnerv/socket/push/20?message=" + this.content
                this.$http.get(url)
                    .then(function (response) {
                    console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                    .then(function () {
                    });
            }
        }
    }
</script>

<style scoped>

    .message-content {
        position: absolute;
        top: 0;
        left: 290px;
        width: 620px;
        height: 640px;
        background-color: #f2f3f5;
        float: left;
    }

    .message-content-title {
        padding-left: 20px;
        height: 35px;
        border-bottom: #cccccc solid 1px;
    }

    .message-content-show {
        padding: 0 10px;
        height: 410px;
        border-bottom: #cccccc solid 1px;
        overflow-y: auto;
    }

    .message-content-input {
        height: 130px;
        overflow: hidden;
    }

    .message-content-send {
        height: 35px;
        float: right;
    }

</style>